import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button, message } from 'antd';
import {
  WeaLocaleProvider,
  WeaMoreButton,
  WeaDialog,
  WeaSearchGroup,
} from 'ecCom';
import { RenderForm } from '../util';

const getLabel = WeaLocaleProvider.getLabel;

@inject('settingStore')
@observer
class Edit extends Component {
  constructor(props) {
    super(props);
    this.prefixCls = 'email-setting-label-edit';
  }

  getForm = (form, fields) => {
    const { isFormInit } = form;
    let group = [];
    isFormInit &&
      fields &&
      fields.map((c) => {
        let items = [];
        c.items.map((field) => {
          items.push({ com: RenderForm(form, field) });
        });
        group.push(
          <WeaSearchGroup
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaSearchGroup@cmt0v1@labeleditform`}
            col={1}
            needTigger={true}
            showGroup={c.defaultshow}
            items={items}
          />,
        );
      });
    return group;
  };

  addLabel = (callback) => {
    const {
      settingStore: { labelStore },
    } = this.props;
    const { getEmailLabelCondition, setStoreState } = labelStore;
    getEmailLabelCondition('', () => {
      setStoreState({ editTitle: getLabel(83263, '新建标签') });
      if (callback && typeof callback === 'function') callback();
    });
  };

  onSubmit = (params) => {
    const {
      settingStore: { labelStore },
      onSubmit,
    } = this.props;
    const { operateUserMailLabel, editForm, isEdit, editId } = labelStore;
    const formParams = editForm.getFormParams();
    params = { ...formParams, ...params };
    isEdit && (params = { ...params, operation: 'edit', id: editId });
    operateUserMailLabel(params).then((res) => {
      if (res.flag) {
        if (params.operation == 'labelCreate') {
          // 新建并标记为
          message.success(
            `${getLabel(611, '添加')}${getLabel(384406, '标签成功！')}`,
          );
        } else {
          message.success(getLabel(83551, '保存成功！'));
        }
        if (onSubmit && typeof onSubmit === 'function') onSubmit(res);
        this.onCancel();
      } else {
        let errorMsg =
          res.message === 'repeat'
            ? getLabel('26603', '名称重复')
            : getLabel(21809, '保存失败，请重试！');
        message.error(errorMsg);
      }
    });
  };

  onCancel = () => {
    const {
      settingStore: { labelStore },
      onCancel,
    } = this.props;
    const { setStoreState, editForm } = labelStore;
    setStoreState({ isEdit: false, editId: '' });
    editForm.resetForm();
    if (onCancel && typeof onCancel === 'function') onCancel();
  };

  onSave = () => {
    const {
      settingStore: { labelStore },
      operation,
      mailIds,
    } = this.props;
    /* eslint-disable */
    let params = { operation: operation || "add" };
    /* eslint-enable */
    if (operation && operation == 'labelCreate') {
      params = { ...params, ...{ mailIds } };
    }
    labelStore.editSubmit(() => this.onSubmit(params));
  };

  render() {
    const {
      settingStore: { labelStore },
      visible,
      operation,
      mailIds,
    } = this.props;
    const { editTitle, editForm, editFields } = labelStore;
    /* eslint-disable */
    let params = { operation: operation || "add" };
    /* eslint-enable */
    if (operation && operation == 'labelCreate') {
      params = { ...params, ...{ mailIds } };
    }
    const buttons = [
      <Button
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_Button@2auk4q@labeleditsave`}
        type="primary"
        onClick={this.onSave}
      >
        {getLabel(30986, '保存')}
      </Button>,
      <WeaMoreButton
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaMoreButton@195ykx@labeleditmore`}
      />,
    ];
    return (
      <WeaDialog
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaDialog@qeowpa`}
        icon="icon-coms-email"
        iconBgcolor="#a0b0ba"
        title={editTitle}
        style={{ width: 600 }}
        className={this.prefixCls}
        visible={visible}
        onCancel={this.onCancel}
        buttons={buttons}
        hasScroll
      >
        {this.getForm(editForm, editFields)}
      </WeaDialog>
    );
  }
}

export default Edit;

/*
  外部调用方式：
  visible: must 控制弹窗显隐
  onCancel: 取消/关闭弹窗回调
  onSubmit: 保存回调
  open方法： 通过ref调用addLabel(callback)
*/
